<template>
	<div class="confirmOrder">
		<!--地址-->
		<div class="delivery_address fix">
			<!--没地址-->
			<router-link to="addAddress" class="no_address" v-if="addressFlag == false">
				<img class="address_icon fl" src="../assets/image/ico_location@2x.png">
				<p class="address_p fl">请填写收货地址</p>
				<img class="add_address fr" src="../assets/image/ico_leave-for@2x.png">
			</router-link>
			<!--有地址-->
			<router-link to="selectAddress" class="has_address" v-if="addressFlag == true">
				<img class="address_icon fl" src="../assets/image/ico_location@2x.png">
				<div class="default_address fl">
					<p>收货人：{{addressList.consignee}}</p>
					<p>收货地址：{{addressList.province}} {{addressList.city}} {{addressList.district}} {{addressList.address}}</p>
				</div>
				<div class="default_phone">{{addressList.mobile ? addressList.mobile : addressList.tel}}</div>
				<img class="add_address fr" src="../assets/image/ico_leave-for@2x.png">
			</router-link>
		</div>
		<!--产品-->
    <ul>
      <li class="product_msg" v-for="(item, key, index) in storeList">
        <div class="shop_name fix">
          <router-link to="/">
            <img class="shop_icon fl" src="../assets/image/ico_Shop@2x.png">
            <p class="name_text fl">{{item[0].storeName}}&nbsp;&nbsp;&nbsp;〉</p>
          </router-link>
        </div>
        <div class="productbar" v-for="(part, partIndex) in item">
          <div class="product_list">
            <div class="product_item fix">
              <router-link to="/"><img :src="part.imageUrl" class="pro_img fl"></router-link>
              <div class="pro_name fl">
                <router-link to="/"><div class="name_text">{{part.itemName}}</div></router-link>
                <p class="pro_message"><span>颜色：{{part.itemColor}}</span><span>尺码：{{part.itemSize}}</span></p>
              </div>
              <div class="pro_price fr">
                <p class="shop_price">¥{{part.itemPriceNow}}</p>
                <p class="market_price">¥{{part.itemPrice}}</p>
                <p class="pro_num">×{{part.itemNum}}</p>
              </div>
            </div>
          </div>
        </div>
        <!--配送-->
        <div class="row fix">
          <div class="row_name fl">配送方式</div>
          <router-link :to='{path:"deliveryWay", query: {storeId: item[0].storeId,storeName:item[0].storeName,storePhoneNum:item[0].storePhoneNum,address:item[0].address}}' class="delivery fr" >
            <img class="delivery_enter fr" src="../assets/image/ico_leave-for@2x.png">
            <p class="delivery_describe">{{deliveryMsg["storeId_"+item[0].storeId]? deliveryMsg["storeId_"+item[0].storeId].type: '快递包邮'}}</p>
          </router-link>
        </div>
        <div class="delivery_pickup" v-if="deliveryMsg['storeId_'+item[0].storeId] && deliveryMsg['storeId_'+item[0].storeId].type == '门店自提'">
          <ul class="pickup_list">
            <li>
              <div class="pickup_title">日期和时间</div>
              <div class="pickup_time">{{deliveryMsg['storeId_'+item[0].storeId].timing}}</div>
            </li>
            <li>
              <div class="pickup_title">店铺简介</div>
              <div class="pickup_store">{{item[0].storeName}}</div>
              <div class="pickup_address">{{item[0].address}}</div>
              <div class="pickup_phone">{{item[0].storePhoneNum}}</div>
            </li>
            <li>
              <div class="pickup_title">提货人</div>
              <div class="pickup_name">{{deliveryMsg['storeId_'+item[0].storeId].deliveryName}}</div>
              <div class="pickup_mobile">{{deliveryMsg['storeId_'+item[0].storeId].deliveryMobile}}</div>
            </li>
          </ul>
        </div>
        <!--小计-->
        <div class="row fix">
          <div class="row_name fl">价格合计：</div>
          <div class="amount_little fr">￥{{partItem[key]}}</div>
        </div>
      </li>
    </ul>
		<!--总计-->
		<div class="amount fix">
			<div class="amount_num fl">总计：￥{{amountPrice}}</div>
			<a class="payfor fr" @click="toPay">去支付</a>
		</div>
		<!--退出支付弹窗-->
		<div class="popup hidden">
			<div class="payoff_contert">
				<img class="payoff_img" src="../assets/image/mascot@2x.png">
				<p class="payoff_p">确认要放弃付款？</p>
				<span class="payoff_span">订单会保留24小时，请尽快支付~</span>
				<ul class="payoff_list fix">
					<li class="payoff_yes"><router-link to="/">确认离开</router-link></li>
					<li class="payoff_no">继续支付</li>
				</ul>
			</div>
		</div>
    <div :class="[{'on': isTip}, 'popup pay_tip']">
      <div class="payoff_contert">
        <img v-if="payResult.state === 'error'" class="payoff_img" src="../assets/image/mascot@2x.png">
        <img v-else class="payoff_img" src="../assets/image/mascot_receipt.png">
        <span class="payoff_span">{{payResult.content ? payResult.content.statusMsg : ''}}</span>
      </div>
    </div>
	</div>
</template>
<script>
	import Vue from 'vue'

	export default {
		name: 'app',
		data () {
			return {
        partItem: {},
        productList:[],
        storeList:[],
        since:false,
        token:'',
        addressList:{},
        stake:[],
        selftake:[],
				amountPrice:0,
        deliveryMsg:{},
        from:'',
        buyNow:null,
        isTip: false,
        payResult: '',
        addressCon:{},
        addressMsg:{},
        addressFlag:false
			}
		},
    created(){
      this.from=this.$route.query.from;
    },
    mounted:function () {
      this.$nextTick(function () {
        this.findConsignee();
        this.fetch();
      })
    },
		methods:{
      fetch:function () {

          var productList =[];
          productList = JSON.parse(window.localStorage.getItem("shopCarMsg") || '[]');
          this.productList = productList;
          var storeList = {};
          var _this = this;
          for (var i = 0; i < _this.productList.length; i++) {
            if (storeList[_this.productList[i].storeId]) {
              storeList[_this.productList[i].storeId].push(_this.productList[i])
            }
            else {
              storeList[_this.productList[i].storeId] = [_this.productList[i]]
            }
          }

          this.storeList = storeList;
          for(let key in storeList) {
            storeList[key].forEach(function (item, index) {
              _this.partItem[key] = _this.partItem[key] || 0;
              _this.partItem[key] += item.itemPriceNow * item.itemNum;
            });
            _this.amountPrice += _this.partItem[key];
          }

          this.deliveryMsg = JSON.parse(Util.ajaxPath.getCookie("deliverMsg") || '{}');
          console.log(Util.ajaxPath.getCookie("deliverMsg"));
          for(let key in this.deliveryMsg) {
             if(this.deliveryMsg[key].type == '门店自提') {
                this.stake.push({
                 "storeId": this.deliveryMsg[key].id,
                 "logisticsType": "0",
                 "appointmentTime":this.deliveryMsg[key].timing,
                 "takeUser": this.deliveryMsg[key].deliveryName,
                 "takeMobile":this.deliveryMsg[key].deliveryMobile})
               var keyValue = key.split("_");
                var k = keyValue[1];
               this.selftake.push({
                 "storeId": this.deliveryMsg[key].id,
                 "logisticsType": "0",
                 "appointmentTime":this.deliveryMsg[key].timing,
                 "takeUser": this.deliveryMsg[key].deliveryName,
                 "takeMobile":this.deliveryMsg[key].deliveryMobile,
                 "takePrice":this.partItem[k],
                 "storeTel":this.storeList[k][0].storePhoneNum,
               })
             }
          }
          console.log(deliveryMsg["storeId_"+item[0].storeId].type);
      },
      findConsignee:function () {
        var _this = this;
        this.addressCon = JSON.parse(Util.ajaxPath.getCookie("addressCon") || '{}');
        if(Util.ajaxPath.isEmptyObject(this.addressCon)){
          _this.addressList = _this.addressCon;
          _this.addressFlag = true;
        }else {
          this.token = window.localStorage.getItem("token") || '[]';
          this.$http.post(Util.ajaxPath.devOrderUrl+'shop-order/oms/api/findConsignee',{token:this.token},{emulateJSON : true}).then(function (res) {
            var addressContent = res.body.content;
            if(res.body.code == 10009){
                alert("请登录！")
            }else if(res.body.code == 13000) {
                if(addressContent.length > 0){
                  _this.addressFlag = true;
                }
              addressContent.forEach(function (part,index) {
                if(part.isDefault == 1){
                  _this.addressList = part;
                  return
                }else{
                  _this.addressList = addressContent[0];
                }
              });
            }
          });
        }
      },
      toPay:function (){
        var _this = this;
        if(_this.from ="shopCar"){
          _this.buyNow = 1;
        }else if( this.from = "commodityDetail"){
          _this.buyNow = 0;
        }

        var orderMessage = {};
//        if(this.stake.length < this.storeList.length){
            orderMessage = '{"paymentTypeId":"1","paymentType":"微信支付","orderTotalAmount":"'+_this.amountPrice+'","orderDiscount":"0","integral":"0","actualAmount":"'+_this.amountPrice+'","consignee":"'+_this.addressList.consignee+'","provinceId":"'+_this.addressList.provinceId+'","province":"'+_this.addressList.province+'","cityId":"'+_this.addressList.cityId+'","city":"'+_this.addressList.city+'","districtId":"'+_this.addressList.districtId+'","district":"'+_this.addressList.district+'","address":"'+_this.addressList.address+'","mobile":"'+_this.addressList.mobile+'","buyNow":"'+_this.buyNow+'","items":'+JSON.stringify(_this.productList)+',"stake":'+JSON.stringify(_this.stake)+',"orderSource":"H5"}';
//        }else {
//          orderMessage = '{"paymentTypeId":"1","paymentType":"微信支付","orderTotalAmount":"'+_this.amountPrice+'","orderDiscount":"0","integral":"0","actualAmount":"'+_this.amountPrice+'","buyNow":"'+_this.buyNow+'","items":'+JSON.stringify(_this.productList)+',"stake":'+JSON.stringify(_this.stake)+',"orderSource":"H5"}';
//        }

        _this.$http.post(Util.ajaxPath.devOrderUrl+'shop-order/oms/api/placeOrder',{token:'B88BAC65287E5A6D3702C884BDAC0DD0',message:orderMessage},{emulateJSON : true}).then(function (res) {

          _this.payResult = res.body;

          if(_this.payResult.state === 'error') {
            _this.isTip = true;
            if(_this.payResult.content.statusMsg === '提供的更新令牌已过期') {
              _this.payResult.content.statusMsg = '您的登录已失效，请重新登录'
            }
          }else if(_this.payResult.state === 'success'){

            if(_this.stake.length == 0){
              _this.addressMsg = {"actualAmount":_this.amountPrice,"consignee":_this.addressList.consignee,"provinceId":_this.addressList.provinceId,"province":_this.addressList.province,"cityId":_this.addressList.cityId,"city":_this.addressList.city,"districtId":_this.addressList.districtId,"district":_this.addressList.district,"address":_this.addressList.address,"mobile":_this.addressList.mobile};
            }else if(_this.stake.length == _this.storeList.length){
              _this.addressMsg = {"selftake":JSON.stringify(_this.selftake)};
            }else {
              _this.addressMsg = {"actualAmount":_this.amountPrice,"consignee":_this.addressList.consignee,"provinceId":_this.addressList.provinceId,"province":_this.addressList.province,"cityId":_this.addressList.cityId,"city":_this.addressList.city,"districtId":_this.addressList.districtId,"district":_this.addressList.district,"address":_this.addressList.address,"mobile":_this.addressList.mobile,"selftake":JSON.stringify(_this.selftake)};
            }
            Util.ajaxPath.setCookie("addressMsg",JSON.stringify(_this.addressMsg));
//            _this.$router.push({
//              window.location.href = _this.payResult.content.mweburl
//            })
          }
          setTimeout(function() {
            _this.isTip = false;
          }, 3000)
        });
      },
		}
	}
</script>
<style lang="scss">
.confirmOrder{
	// 地址
	.delivery_address{
		width: 100%; height: 1.6rem; background: #fff url(../assets/image/line_add@2x.png) no-repeat bottom; border-bottom: 0.2rem solid #f4f5f5; position: relative;
		.address_icon{ display: block; float: left; padding: 0.61rem 0.18rem 0 0.3rem; width: 0.32rem; height: 0.32rem; }
		.address_p{ padding-top: 0.63rem; height: 0.28rem; line-height: 0.28rem; font-size: 0.28rem; color: #333; }
		.add_address{ padding: 0.6rem 0.3rem 0 0; width: 0.34rem; height: 0.34rem; }

		.default_address{
			padding-top: 0.26rem;
			p{ width: 4.54rem; line-height: 0.36rem; font-size: 0.24rem; color: #333; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; word-break: break-all;}
		}
		.default_phone{ height: 0.2rem; line-height: 0.2rem; font-size: 0.2rem; color: #333; position: absolute; right: 0.56rem; top: 0.33rem; }
	}
  .product_msg + .product_msg{
    margin-top: 0.2rem;
  }
	// 产品
	.shop_name{
		width: 100%; height: 0.64rem; background: #fff;
		.shop_icon{ padding: 0.18rem 0.14rem 0 0.33rem; width: 0.28rem; height: 0.28rem; }
		.name_text{ padding: 0.2rem 0; height: 0.24rem; line-height: 0.24rem; font-size: 0.24rem; color: #353535; }
	}
	.product_item{
		width: 100%; height: 1.73rem; background: #f4f5f5;
		.pro_img{ padding: 0.19rem 0.15rem 0 0.3rem; width: 1.35rem; height: 1.35rem; }
		.pro_name{ padding-top: 0.13rem; width: 3.92rem; }
		.name_text{ width: 3.92rem; line-height: 0.36rem; font-size: 0.24rem; color: #353535; }
		.pro_message{
			padding-top: 0.13rem;
			span{
				display: block; float: left; font-size: 0.2rem; color: #999;
				+span{ padding-left: 0.5rem; }
			}
		}
		.pro_price{ padding: 0.18rem 0.3rem 0 0; }
		.shop_price{ line-height: 0.28rem; text-align: right; font-size: 0.28rem; color: #353535; }
		.market_price{ padding: 0.14rem 0 0.2rem 0; line-height: 0.24rem; text-align: right; text-decoration: line-through; font-size: 0.24rem; color: #999; }
		.pro_num{ line-height: 0.24rem; text-align: right; font-size: 0.24rem; color: #666; }
	}
	// 行
	.row{ margin-top: 0.06rem; padding: 0 0.3rem; height: 0.88rem; line-height: 0.88rem; background: #fff; }
	.row_name{ font-size: 0.24rem; color: #999; }
	// 配送
	.delivery_enter{ display: block; padding: 0.3rem 0 0 0.3rem; width: 0.3rem; height: 0.3rem; }
	.delivery_describe{ float: right; font-size: 0.24rem; color: #323131; }
	.delivery_pickup{ padding: 0 0.3rem; background: #fff; }
	.pickup_list{ padding: 0.2rem 0; border-top: 1px solid #f1f1f1; }
	.pickup_title{ height: 0.5rem; line-height: 0.5rem; font-size: 0.2rem; color: #999; }
	.pickup_time{ height: 0.4rem; line-height: 0.4rem; font-size: 0.24rem; color: #333;  }
	.pickup_store{ height: 0.4rem; line-height: 0.4rem; font-size: 0.24rem; color: #333; }
	.pickup_address{ height: 0.4rem; line-height: 0.4rem; font-size: 0.2rem; color: #666; overflow: hidden;text-overflow:ellipsis;white-space: nowrap;}
	.pickup_phone{ height: 0.4rem; line-height: 0.4rem; font-size: 0.28rem; color: #ff365d; }
	.pickup_name{ height: 0.4rem; line-height: 0.4rem; font-size: 0.24rem; color: #333; }
	.pickup_mobile{ height: 0.4rem; line-height: 0.4rem; font-size: 0.2rem; color: #666; }
	// 小计
	.amount_little{ font-size: 0.2rem; color: #ff365d; }
	// 积分
	.integral{ margin-top: 0.06rem; padding: 0 0.3rem; height: 1.24rem; border-color: #fff; background: #fff; }
	.in_de_grey{ padding-top: 0.34rem; height: 0.24rem; line-height: 0.24rem; font-size: 0.24rem;  color: #999; }
	.in_de_red{ padding-top: 0.16rem; height: 0.24rem; line-height: 0.24rem; font-size: 0.24rem; color: #ff365d; }
	.integral_switch{ padding-top: 0.32rem; }
	.mint-switch-input:checked+.mint-switch-core{ border-color: #ff365d; background-color: #ff365d; }
	// 总计
	.amount{ width: 100%; height: 0.98rem; line-height: 0.98rem; background: #fff; position: fixed; left: 0; bottom: 0; z-index: 2; }
	.amount_num{ padding-left: 0.3rem; font-size: 0.26rem; color: #ff365d; }
	.payfor{ width: 2.26rem; height: 0.98rem; text-align: center; font-size: 0.26rem; color: #fff; background: linear-gradient(to right,#fe4a6b,#e8163f); }
	// 弹窗
	.popup{ width: 100%; height: 100%; background: rgba(0,0,0,.2); position: fixed; left: 0; top: 0; z-index: 20; }
  .popup.pay_tip {display: none;}
  .popup.pay_tip.on {display: block;}
   .popup.pay_tip .payoff_span{ font-size: .3rem; margin-top: 0.6rem;}

	// 退出支付弹窗
	.payoff_contert{ margin: -2.3rem 0 0 -3rem; width: 6rem; height: 4rem; background: #fff; border-radius: 0.2rem; position: absolute; left: 50%; top: 50%; z-index: 21; }
	.payoff_img{ display: block; margin: -1.24rem auto 0; width: 3.49rem; height: 2.49rem; }
	.payoff_p{ padding-top: 0.54rem; height: 0.3rem; line-height: 0.3rem; text-align: center; font-size: 0.3rem; color: #333; }
	.payoff_span{ display: block; padding-top: 0.3rem; height: 0.24rem; line-height: 0.24rem; text-align: center; font-size: 0.24rem; color: #666; }
	.payoff_list{
		margin: 0.5rem 0.6rem 0; border-top: 1px solid #ddd;
		li{ float: left; width: calc(100%/2); height: 0.9rem; line-height: 0.9rem; text-align: center; }
	}
	.payoff_yes a{ font-size: 0.26rem; color: #666; }
	.payoff_no{ font-size: 0.26rem; color: #ff365d; }
}
</style>
